<template>
  <div>
    <TypeNav></TypeNav>
    <Listcontainer></Listcontainer>
    <Recommand></Recommand>
    <Rank></Rank>
    <Like></Like>
    <!-- 由于Floors有多少个是不确定的,根据后端响应的数据来决定,所以我们需要将Floors组件遍历,并且将对应参数传递过去 -->
    <Floor v-for="floors in floorsList" :key="floors.id" :data="floors" :sum="'floors-swiper' + floors.id"></Floor>
    <Brand></Brand>
  </div>
</template>

<script>
import Listcontainer from "./Listcontainer/index.vue"
import Recommand from "./Recommend/recommend.vue"
import Rank from "./Rank/index.vue"
import Like from "./Like"
import Floor from "./Floor/index.vue"
import Brand from "./Brand/index.vue"
import TypeNav from "@/components/Typenav"
import { mapState } from "vuex"
export default {
  name: "AppHome",
  props: ["id"],
  components: {
    Listcontainer,
    Recommand,
    Rank,
    Like,
    Floor,
    Brand,
    TypeNav,
  },
  computed: {
    // 在开启模块化后,使用映射属性 必须是加上模块的名称,后面是个数组,可以映射多个
    ...mapState("home", ["floorsList"]),
  },
  mounted() {
    // 派发一个方法,去store中发送请求,拿到数据后,将数据映射到floors组件,最后进行渲染.
    //  在开启模块化中,使用store中的方法,必须加上模块的名称以/拼接
    this.$store.dispatch("home/getFloorsListData", this.id)
    // 在home组件挂载完成后,获取token
  },
}
</script>

<style></style>
